<template>
  <div>
    <a-modal
      :afterClose="clearForm"
      title="新增客户信息"
      :visible="visible "
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="prods_form"
        :rules="add_customer_rule"
        :model="form_cus"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="姓名">
          <a-input v-model="form_cus.realname" placeholder="请输入姓名" prop="realname" />
        </a-form-model-item>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="性别" :label-col="{span:12}" :wrapper-col="{span:10}">
              <a-radio-group v-model="form_cus.gender" button-style="solid">
                <a-radio-button :value="0">男</a-radio-button>
                <a-radio-button :value="1">女</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="生日" :label-col="{span:4}" :wrapper-col="{span:12}">
              <a-date-picker v-model="form_cus.birthday" inputReadOnly />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item label="电话">
          <a-input v-model="form_cus.tel" placeholder="请输入电话" prop="tel" />
        </a-form-model-item>
        <a-form-model-item label="地址">
          <a-input type="textarea" v-model="form_cus.address" placeholder="请输入地址" prop="address" />
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-input type="textarea" v-model="form_cus.desc" placeholder="请输入备注" prop="desc" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <div style="display:flex;align-items:center;padding-bottom:10px">
      <a-button type="primary" @click="visible=true" size="small" icon="plus">新增客户信息</a-button>
      <div style="padding:0 30px;">
        关键字：
        <a-input style="width:180px;" v-model="keywords" placeholder="姓名、电话、地址"></a-input>
      </div>

      <a-button type="primary" html-type="submit" icon="search" @click="getList()">搜 索</a-button>
    </div>
    <a-table
      rowKey="id"
      :pagination="false"
      :columns="columns"
      :data-source="data"
      style="text-align:center; "
    >
      <span slot="realname" slot-scope="t,r">
        <a-popover trigger="hover">
          <div style="text-decoration:underline">{{t}}</div>
          <template slot="content">
            <div style="font-size:13px;">姓名：{{t}}</div>
            <div style="font-size:13px;">电话：{{r.gender|fmtGender}}</div>
            <div style="font-size:13px;">备注：{{r.desc}}</div>
          </template>
          <div style="font-size:14px; text-decoration: underline;">{{r.sender}}</div>
        </a-popover>
      </span>

      <span slot="receiver" slot-scope="t,r">
        <a-popover>
          <template slot="content">
            <div style="font-size:13px;">电话：{{r.r_tel}}</div>
            <div>地址：{{r.address}}</div>
          </template>
          <div style="font-size:14px; text-decoration: underline;">{{r.receiver}}</div>
        </a-popover>
      </span>

      <span slot="action" slot-scope="text,r">
        <a-button size="small" icon="edit" @click="del(r.id)"></a-button>
        <a-divider type="vertical"></a-divider>
        <a-button size="small" icon="delete" type="danger" @click="del(r.id)"></a-button>
      </span>
    </a-table>

    <Center>
      <a-pagination
        v-model="current"
        :page-size-options="pageSizeOptions"
        :total="total"
        :page-size="pageSize"
        @showSizeChange="onShowSizeChange"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </Center>
  </div>
</template>

<script>
import Center from "@/components/Center";
import add_customer_rule from "@/rules/add_customer_rule";
const columns = [
  {
    dataIndex: "realname",
    key: "realname",
    title: "姓名",
    width: 190,
    ellipsis: true,
    scopedSlots: { customRender: "realname" },
  },

  {
    title: "电话",
    key: "tel",
    dataIndex: "tel",
  },
  {
    title: "地址",
    dataIndex: "address",
    key: "address",
    width: 150,
    ellipsis: true,
  },
  {
    title: "生日",
    key: "birthday",
    dataIndex: "birthday",
  },

  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

columns.forEach((r) => (r.align = "center"));

export default {
  name: "Index",
  components: {
    Center,
  },
  filters: {
    fmtState(val) {
      return ["待发货", "已发货", "待付款", "已送达"][val];
    },
    fmtColor(val) {
      return ["pink", "orange", "green", "red"][val];
    },
  },
  data() {
    return {
      id: "1",
      visible: false,
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      current: 1,
      pageSize: 6,
      total: 0,
      size: "default",
      columns,
      add_customer_rule,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      data: [],
      keywords: "",
      form_cus: {
        gender: 0,
        birthday: null,
        realname: "",
        desc: "",
        address: "",
        tel: "",
      },
    };
  },
  watch: {
    current() {
      this.getList();
    },
  },
  methods: {
    handleCancel() {
      this.visible = false;
    },
    handleOk() {
      this.$refs.prods_form.validate(async (valid) => {
        if (valid) {
          this.form_cus.birthday = this.form_cus.birthday.format("yyyy/MM/DD");
          let { success } = await this.$post("/cus/save", this.form_cus);
          if (success) {
            this.$ms("添加成功！");
            this.getList();
            this.visible = false;
          }
        }
      });
    },
    async getList() {
      let { data } = await this.$get("/cus/list", {
        pageIndex: this.current,
        pageSize: this.pageSize,
        keywords: this.keywords,
      });
      this.data = data.list;
      this.total = data.count;
    },
    del(id) {
      this.$mc("您确定删除吗？", async () => {
        let { success } = await this.$post("/cus/del", { id });
        if (success) {
          this.$ms("删除成功！");
          this.getList();
        }
      });
    },
    clearForm() {
      this.$refs.prods_form.resetFields();
      this.form_cus = {
        gender: 0,
        birthday: null,
        realname: "",
        desc: "",
        address: "",
        tel: "",
      };
    },

    onShowSizeChange(i, size) {
      this.pageSize = size;
      this.getList();
    },
  },
  async created() {
    this.getList();
  },
};
</script>

<style scoped lang='scss'>
</style>    